<template>
	<section class="roleManage">
		<el-row>
			<el-col :span="14" class="leftDiv">
				<h4>角色列表</h4>
				<el-row class="header">
					<el-col :span="16">
						<el-button type="primary" icon="plus" size="small" @click="addRole()">角色录入</el-button>
						<el-button type="primary" icon="edit" size="small" @click="editRole()">角色编辑</el-button>
						<el-button type="primary"
							icon="search"
							size="small"
							@click.native="watchMember()"
							>查看成员</el-button>
					</el-col>
					<el-col :span="8">
						<el-input v-model="keyword"
							placeholder="请输入角色名称关键字"
							size="small"
							icon="search"
							:on-icon-click="handleIconClick"></el-input>
					</el-col>
				</el-row>
				<el-table
                    :data="table.tableData"
                    v-loading="table.tableLoading"
                    border
                    highlight-current-row
                    style="width: 100%"
                    @current-change="handleRowChange">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="roleCode" label="角色编码" width="180">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名称" width="180">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                    	<template scope="scope">
                    		<el-button
                            size="small"
                            type="danger"
                            @click.native.stop='delRole(scope.row.id)'>删除</el-button>
                            <el-button
                            size="small"
                            @click.native='getMenuTree(scope.row.id)'>权限设置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="table.page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="table.rows"
                    layout="sizes, prev, pager, next"
                    :total="table.total"
                    style="float:right;">
                </el-pagination>
			</el-col>
			<el-col :span="10" class="rightDiv">
				<el-row class="header titleDiv">
					<h4>{{roleName}}:当前权限</h4>
				</el-row>
				<el-row class="content">
					<el-col :span='12' style="border-right: 1px solid #e1e1e1;">
						<div>
							<el-row class="titleDiv">菜单列表
              </el-row>
              <el-row style="padding: 5px;border-bottom: 1px solid #d1dbe5;">
                <el-button :plain="true" size="small" @click.native="allPick()">全选</el-button>
                <el-button :plain="true" size="small" @click.native="allPickreset()">重置</el-button>
                <el-button type="success"
                  size="small"
                  icon="document"
                  style="float: right;"
                  @click.native='submitAuthority()'>
                保存</el-button>
              </el-row>
						</div>
						<el-row class="contentDiv">

							<el-tree
								ref="tree"
                                :data="tree.treeData"
                                show-checkbox
                                check-strictly
                                node-key="id"
                                :default-expand-all='true'
                                :default-checked-keys="tree.checkArray"
                                v-loading='tree.treeLoading'
                                :props="tree.props"
                                @node-click="handleNodeClick"
                                @check-change="handleCheckChange">
                            </el-tree>
						</el-row>
					</el-col>
					<el-col :span='12' >
						<el-row class="titleDiv">
							{{menu}}操作按钮列表
						</el-row>
            <el-row style="padding: 5px;border-bottom: 1px solid #d1dbe5;">
                <el-button :plain="true" size="small" @click.native="buttonAllpick()">全选</el-button>
                <el-button :plain="true" size="small" @click.native="getoperationListreset()">重置</el-button>
                <el-button type="success"
                size="small"
                icon="document"
                style="float: right;"
                @click.native='submitOperation()'>
              保存</el-button>
            </el-row>
            <div style="overflow-y: scroll;">
              <el-row v-for="(operationList,index) in operationList" :key="index">
              <el-checkbox-group v-model="checkedId" >
                <el-checkbox :label="operationList.operationCode"  >{{operationList.operationName}}</el-checkbox>
              </el-checkbox-group>
            </el-row>
            </div>

					</el-col>
				</el-row>
			</el-col>
			<!-- 弹窗   v-for="(operationcodes,index) in operationcodes" :key="index"-->
			<el-dialog :title="dialog.title" v-model="dialog.show">
				<el-row v-show="dialog.type=='watchMember'" class="watchMember">
					<el-col :span="12">
						<el-row class="content">
							<h4 style="margin-left: 12px;">角色外用户</h4>
						    <el-form :inline="true"  class="searchForm" label-width="70px" label-position="left">
                                <el-form-item label="用户名">
                                    <el-input  placeholder="请输入要搜索的用户名" size="mini" v-model='dialog.inUser'></el-input>
                                </el-form-item>
                                <el-form-item label="真实姓名">
                                    <el-input  placeholder="请输入要搜索的用户真实姓名" size="mini" v-model='dialog.inRealName'></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="mini" icon="plus" @click.native="addInUser()">添加</el-button>
                                    <el-button type="primary" size="mini" icon="edit" @click.native="reset('left')">重置</el-button>
                                    <el-button type="primary" size="mini" icon="search" @click.native="searchPerson('left')">查询</el-button>
                                </el-form-item>
                            </el-form>
                            <el-table
                                ref="multipleTable"
                                :data="dialog.tableLeft"
                                v-loading='dialog.leftLoading'
                                border
                                tooltip-effect="dark"
                                style="width: 100%;margin-top: 4px;"
                                @selection-change="handleSelectionChange1">
                                <el-table-column type="selection" width="40">
                                </el-table-column>
                                <el-table-column type="index" width="40">
                                </el-table-column>
                                <el-table-column prop="userName" label="用户名" width="120">
                                </el-table-column>
                                <el-table-column prop="realName" label="真实姓名" show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                @current-change="leftPageChange"
                                :current-page.sync="dialog.leftPage"
                                :page-size="20"
                                layout="total, prev, pager, next"
                                :total="dialog.leftTotal">
                            </el-pagination>
						</el-row>
					</el-col>
					<el-col :span="12">
						<el-row class="content">
							<h4 style="margin-left: 12px;">角色内用户</h4>
						    <el-form :inline="true"  class="searchForm" label-width="70px" label-position="left">
                                <el-form-item label="用户名">
                                    <el-input  placeholder="请输入要搜索的用户名" size="mini" v-model='dialog.outUser'></el-input>
                                </el-form-item>
                                <el-form-item label="真实姓名">
                                    <el-input  placeholder="请输入要搜索的用户真实姓名" size="mini"  v-model='dialog.outRealName'></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="mini" icon="minus" @click.native="delInUser()">删除</el-button>
                                    <el-button type="primary" size="mini" icon="edit" @click.native="reset('right')">重置</el-button>
                                    <el-button type="primary" size="mini" icon="search" @click.native="searchPerson('right')">查询</el-button>
                                </el-form-item>
                            </el-form>
                            <el-table
                                ref="multipleTable"
                                :data="dialog.tableRight"
                                v-loading='dialog.rightLoading'
                                border
                                tooltip-effect="dark"
                                style="width: 100%;margin-top: 4px;"
                                @selection-change="handleSelectionChange2">
                                <el-table-column type="selection" width="40">
                                </el-table-column>
                                <el-table-column type="index" width="40">
                                </el-table-column>
                                <el-table-column prop="userName" label="用户名" width="120">
                                </el-table-column>
                                <el-table-column prop="realName" label="真实姓名" show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                @current-change="rightPageChange"
                                :current-page.sync="dialog.rightPage"
                                :page-size="20"
                                layout="total, prev, pager, next"
                                :total="dialog.rightTotal">
                            </el-pagination>
						</el-row>
					</el-col>
				</el-row>
				<el-form :inline="true"
					:model="submitForm"
					:rules="submitForm.rules"
					label-width="90px"
					class="submitDialog"
					v-show='dialog.type=="editRole"||dialog.type=="addRole"'>
		    		<el-form-item label="角色名称" prop="name">
                        <el-input v-model="submitForm.name" placeholder="角色名称"></el-input>
                        <span class="warning">菜单名称范围2~100位字符,且不为空</span>
                    </el-form-item>
                    <el-form-item label="角色编码" prop="code">
                        <el-input v-model="submitForm.code" placeholder="角色编码"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: right;width: 100%;">
                        <el-button type="primary" @click.native="submitRole()">确定</el-button>
                        <el-button @click.native="dialog.show=false">取消</el-button>
                    </el-form-item>
		    	</el-form>
			</el-dialog>
		</el-row>
	</section>
</template>
<script>
	import NProgress from 'nprogress'
  	import { roleMaList,setAuthority,updateAuthority,memberList1,memberList2,deletRole,addRoleUser,deleteRoleUser,saveRole,operationList,updateOperation} from '../../api/system';
  	export default {
  		data(){
  			return {
  				keyword:'',
  				table:{
  					tableLoading:false,
  					tableData:[],
  					page:1,
  					rows:10,
  					total:0,
  					currentRow:null
  				},
  				dialog:{
  					show:false,
  					title:'',
  					type:'',
  					tableLeft:[],
  					tableRight:[],
  					leftLoading:false,
  					rightLoading:false,
  					leftPage:1,
  					leftRows:10,
  					leftTotal:0,
  					leftSelected:[],
  					rightPage:1,
  					rightRows:10,
  					rightTotal:0,
  					rightSelected:[],
  					inUser:'',
  					inRealName:'',
  					outUser:'',
  					outRealName:''
  				},
  				submitForm:{
  					name:'',
  					code:'',
  					rules:{
  						name:[
                		    { required: true, message: '请输入操作名称', trigger: 'blur' },
                            { min: 3, max: 100, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                		],
                		code:[
                		    { required: true, message: '请选择操作代码', trigger: 'blur' }
                		],
  					}
  				},
  				tree:{
  					treeData:[],
  					props: {
                        children: 'children',
                        label: 'text'
                   },
                   treeLoading:false,
                   checkArray:[],
                   currentRoleId:''
  				},
          operationList:[],
          operationcodes:[],
          checkedId:[],
          dataId:'',
          attributesArry:[],
          checkattributesArry:[],
          checkArrayss:[],
          treeData:[],
          menu:''
  			}
  		},
  		methods:{
        handleCheckChange(data, checked, indeterminate) {
          this.dataId=data.id;
          // this.tree.checkArray=this.$refs.tree.getCheckedKeys();
          if(checked){
            this.checkattributesArry.push(data);
            this.attributesArry=[];
            this.tree.checkArray=[];
            this.tree.checkArray=this.checkattributesArry.map(item=>item.id);
            this.attributesArry=this.checkattributesArry.map(item=>item.attributes);
          }
          if(checked==false){
            for(var i=0;i<this.checkattributesArry.length;i++){
              if(this.checkattributesArry[i].id==data.id){
                this.attributesArry=[];
                this.tree.checkArray=[];
                this.checkattributesArry.splice(this.checkattributesArry.indexOf(this.checkattributesArry[i]),1);
                this.tree.checkArray=this.checkattributesArry.map(item=>item.id);
                this.attributesArry=this.checkattributesArry.map(item=>item.attributes);
              }
            }
          }
          // console.log(this.tree.checkArray);
          // console.log(this.attributesArry);
        },
        buttonAllpick(){
          this.checkedId = this.operationcodes;
          // console.log(this.checkedId);
        },
        // 按钮重置
        getoperationListreset(){
          this.checkedId=[];
        },
        getoperationList(){
          var para={
            functionId:this.dataId,
            roleId:this.tree.currentRoleId
          };
          operationList(para).then((res)=>{
            this.operationcodes=res.obj.operationList.map(item=>item.operationCode);
            this.operationList=res.obj.operationList;
            this.checkedId=res.obj.operationcodes.join(",");
            this.checkedId=this.checkedId.split(",");
            // this.checkedId=res.obj.operationcodes.map(item=>item.operationCode);
            // console.log(this.checkedId);
          });
        },
        handleNodeClick(data,node){
          this.dataId=data.id;
          this.menu=data.text;
          this.getoperationList();
        },
        submitOperation(){
          var para={
            functionId:this.dataId,
            roleId:this.tree.currentRoleId,
            operationcodes:this.checkedId.toString(),
          };
          updateOperation(para).then(()=>{
            this.getoperationList();
            this.getMenuTree(this.table.currentRow.id);
          });
        },

  			getRoleList(){
  				this.table.tableLoading=true;
  				let para={'page':this.table.page,'rows':this.table.rows};
  				para.field='id,roleCode,roleName,';
  				this.table.tableData=[];
  				roleMaList(para).then((res)=>{
  					this.table.total=res.total;
  					this.table.tableData=res.rows;
            		this.table.tableLoading=false;
	          	});
  			},
  			//查找角色
  			handleIconClick(){
  				this.table.tableLoading=true;
  				let para={'page':this.table.page,'rows':this.table.rows,'searchfield':'roleName'};
  				para.roleName=this.keyword;
  				para.field='id,roleCode,roleName,';
  				this.table.tableData=[];
  				roleMaList(para).then((res)=>{
  					this.table.total=res.total;
  					this.table.tableData=res.rows;
            		this.table.tableLoading=false;
	          	});
  			},
  			//条数改变回调
  			handleSizeChange(size){
  				this.table.rows=size;
          if(this.roleName==null){
            this.getRoleList();
          }else{
            this.handleIconClick();
          };
  				// this.getRoleList();
  			},
  			//页码改变回调
  			handleCurrentChange(page){
  				this.table.page=page;
  				if(this.roleName==null){
            this.getRoleList();
          }else{
            this.handleIconClick();
          };
  			},
  			//角色录入
  			addRole(){
  				this.dialog.show=true;
  				this.submitForm.name='';
  				this.submitForm.code='';
  				this.dialog.title='角色录入';
                this.dialog.type='addRole';
  			},
  			//提交
  			submitRole(){
  				let para={'roleName':this.submitForm.name,'roleCode':this.submitForm.code};
  				if(this.dialog.type=='editRole'){
  					para.id=this.table.currentRow.id;
  				}
  				saveRole(para).then((res)=>{
  					if(res.success==true){
  						this.dialog.show=false;
  						this.getRoleList();
  					}
	          	});
  			},
  			//角色编辑
  			editRole(){
  				this.submitForm.name=this.table.currentRow.roleName;
  				this.submitForm.code=this.table.currentRow.roleCode;
  				this.dialog.show=true;
  				this.dialog.title='角色编辑';
                this.dialog.type='editRole';
  			},
  			//列表选中事件
  			handleRowChange(val){
  				this.table.currentRow=val;
      //     this.getMenuTree(this.table.currentRow.id);
      //     this.dataId='';
      //     this.getoperationList();
  			},
  			//获取菜单列表
  			getMenuTree(id){
  				this.tree.currentRoleId=id;
  				let para={'roleId':id};
  				this.tree.treeLoading=true;
  				this.tree.treeData=[];
          this.attributesArry=[];
  				this.tree.checkArray=[];
          this.checkattributesArry=[];
          this.treeData=[];
          // debugger;
  				setAuthority(para).then((res)=>{
  					this.tree.treeData=res;

  					for(let i=0;i<res.length;i++){
              this.treeData.push(res[i]);
  						if(res[i].checked){
                var data = res[i];
                this.checkattributesArry.push(data);
                // this.attributesArry.push(data.attributes);
  							this.tree.checkArray=this.checkattributesArry.map(item=>item.id);
  						}
              if(res[i].children){
                for (var j = res[i].children.length - 1; j >= 0; j--) {
                  this.treeData.push(res[i].children[j]);
                  if(res[i].children[j].checked==true){
                    this.checkattributesArry.push(res[i].children[j]);
                    this.attributesArry.push(res[i].children[j].attributes);
                    this.tree.checkArray=this.checkattributesArry.map(item=>item.id);
                  }
                  if(res[i].children[j].children){
                    for (var k =0;k< res[i].children[j].children.length ;k++) {
                      this.treeData.push(res[i].children[j].children[k]);
                      if(res[i].children[j].children[k].checked==true){
                        this.checkattributesArry.push(res[i].children[j].children[k]);
                        this.attributesArry.push(res[i].children[j].children[k].attributes);
                        this.tree.checkArray=this.checkattributesArry.map(item=>item.id);
                      }
                      
                    }
                  }

                }
              }
  					}
            // console.log(this.checkattributesArry);
  					this.tree.treeLoading=false;
	        });
  			},
  			//提交权限配置
  			submitAuthority(){
  				this.$confirm('此操作将提交权限配置, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                  let self=this;
                  // debugger;
                    let para={'roleId':self.tree.currentRoleId};
        				    para.rolefunctions=self.tree.checkArray.join(',');
                    var obj=[];
                    if(self.tree.checkArray){
                      for (var i = 0; i < self.tree.checkArray.length; i++) {
                        if(self.attributesArry[i]&&self.attributesArry[i].operationCode && self.tree.checkArray[i]){
                          obj.push({id:self.tree.checkArray[i],value:self.attributesArry[i].operationCode});
                          console.log(obj);
                        }
                      }
                    }
                    
                    para.operations=JSON.stringify(obj);
        				    updateAuthority(para).then((res)=>{
        					    if(res.success==true){
        					    	this.$message({
                            type: 'success',
                            message: '保存成功'
                        });
                        this.getMenuTree(this.tree.currentRoleId);
                        this.dataId='';
                        this.getoperationList();
                        this.menu='';
        					      }
      	          	  });
              }).catch((err) => {
  				    console.log(err)
                  this.$message({
                      type: 'info',
                      message: '已取消操作'
                  });
          });
  			},
  			//查看成员弹出弹窗
  			watchMember(){
  				if(this.table.currentRow){
  					this.dialog.title='查看成员';
  			        this.dialog.type='watchMember';
  				    this.dialog.show=true;
  				    this.getNoRoleList();
  				    this.getInRoleList();
  				}
  				else{
  					this.$message({
                        type: 'error',
                        message: '请选择额要操作的条目'
                    });
  				}
  			},
  			//弹窗的列表回调
  			handleSelectionChange1(val){
  				this.dialog.leftSelected=val;
  			},
  			handleSelectionChange2(val){
  				this.dialog.rightSelected=val;
  			},
  			//获取弹窗角色外列表数据
  			getNoRoleList(){
  				this.dialog.leftLoading=true;
  				let para={'roleid':this.table.currentRow.id,'page':this.dialog.leftPage,'rows':this.dialog.leftRows};
  				para.field='id,userName,realName,';
  				memberList1(para).then((res)=>{
  					this.dialog.leftTotal=res.total;
  					this.dialog.tableLeft=res.rows;
  					this.dialog.leftLoading=false;
	          	});
  			},
  			//获取角色内用户列表数据
  			getInRoleList(){
  				this.dialog.rightLoading=true;
  				let para={'roleid':this.table.currentRow.id,'page':this.dialog.rightPage,'rows':this.dialog.rightRows};
  				para.field='id,userName,realName,';
  				memberList2(para).then((res)=>{
  					this.dialog.rightTotal=res.total;
  					this.dialog.tableRight=res.rows;
  					this.dialog.rightLoading=false;
	          	});
  			},
  			//删除角色
  			delRole(roleId){
  				this.$confirm('此操作将删除选中的角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let para={'id':roleId};
  				    deletRole(para).then((res)=>{
  					    if(res.success==true){
  					    	this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getRoleList();
  					    }
	          	    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
  			},
  			//弹窗搜索人员
  			searchPerson(type){
  				if(type=='left'){
  					this.dialog.leftLoading=false;
  				    let para={'roleid':this.table.currentRow.id,'page':1,'rows':this.dialog.leftRows};
  				    if(this.dialog.inUser!=''){
  				    	para.userName=this.dialog.inUser;
  				    }
  				    if(this.dialog.inRealName!=''){
  				    	para.realName=this.dialog.inRealName;
  				    }
  				    para.field='id,userName,realName,';
  				    memberList1(para).then((res)=>{
  					    this.dialog.leftTotal=res.total;
  					    this.dialog.tableLeft=res.rows;
  					    this.dialog.leftLoading=false;
	          	    });
  				}
  				else{
  					this.dialog.rightLoading=false;
  				    let para={'roleid':this.table.currentRow.id,'page':this.dialog.rightPage,'rows':this.dialog.rightRows};
  				    para.field='id,userName,realName,';
  				    if(this.dialog.outUser!=''){
  				    	para.userName=this.dialog.outUser;
  				    }
  				    if(this.dialog.outRealName!=''){
  				    	para.realName=this.dialog.outRealName;
  				    }
  				    memberList2(para).then((res)=>{
  					    this.dialog.rightTotal=res.total;
  					    this.dialog.tableRight=res.rows;
  					    this.dialog.rightLoading=false;
	          	    });
  				}
  			},
  			//弹窗重置
  			reset(type){
  				if(type=='left'){
  					this.dialog.inUser='';
  					this.dialong.inRealName='';
  				}
  				else{
  					this.dialog.outUser='';
  					this.dialog.outRealName='';
  				}
  			},
  			//弹窗增加用户
  			addInUser(){
  				var str='';
  				for(let i=0;i<this.dialog.leftSelected.length;i++){
  					str+=this.dialog.leftSelected[i].id;
  					str+=',';
  				}
  				let para={'ids':str,roleid:this.table.currentRow.id};
  				addRoleUser(para).then((res)=>{
  					this.getNoRoleList();
  					this.getInRoleList();
	          	});
  			},
  			//弹窗删除用户
  			delInUser(){
  				var str='';
  				for(let i=0;i<this.dialog.rightSelected.length;i++){
  					str+=this.dialog.rightSelected[i].id;
  					str+=',';
  				}
  				let para={'ids':str,roleid:this.table.currentRow.id};
  				deleteRoleUser(para).then((res)=>{
  					this.getNoRoleList();
  					this.getInRoleList();
	          	});
  			},
  			//弹窗翻页回调
  			leftPageChange(val){
  				this.dialog.leftPage=val;
  				this.getNoRoleList();
  			},
  			rightPageChange(val){
  				this.dialog.rightPage=val;
  				this.getInRoleList();
  			},
  			//全选
  			allPick(){
          this.tree.checkArray=[];
          this.attributesArry=[];
          this.tree.checkArray=this.treeData.map(item=>item.id);
          this.attributesArry=this.treeData.map(item=>item.attributes);
         // this.$refs.tree.setCheckedNodes(this.treeData);
				 this.$refs.tree.setCheckedKeys(this.tree.checkArray);
  			},
        allPickreset(){
          this.tree.checkArray=[];
          this.attributesArry=[];
         // this.$refs.tree.setCheckedNodes(this.treeData);
         this.$refs.tree.setCheckedKeys([]);
        },

  		},
  		computed:{
  			roleName:function(){
  				if(this.table.currentRow){
            return this.table.currentRow.roleName;
          }
          else{ return '管理员'}
        }
      },
      activated:function(){
        this.getRoleList();
        this.getMenuTree('8afc99b04c26ad0b014c26af28900042');//默认获取管理员的权限设置
      }
  	}
</script>
<style lang='scss'>
	.roleManage{
		.leftDiv{
			border:1px solid #e1e1e1;
			height: 600px;
			overflow: auto;
			h4{margin: 6px 10px;}
			.header{
				padding:6px 8px;
				border-top: 1px solid #e1e1e1;
				border-bottom: 1px solid #e1e1e1;
			    background-color: #fafcfc;
			    .el-button { margin-top: 1px; }
			}
			.el-pagination{
				margin: 8px 0;
			}
		}
		.rightDiv{
          position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
			border: 1px solid #E1E1E1;
			/*height: 528px;
			overflow: auto;*/
			.header{
              position: relative;
          top: 0;
				padding:6px 10px;
				border-bottom: 1px solid #e1e1e1;
			}
			.content{
				.titleDiv{
              /*position: fixed;
              z-index: 10;
              background-color: #fff;*/
					padding:13px 10px 10px 10px;
					font-size: 14px;
					font-weight: 500;
					color: #222;
				    border-bottom: 1px solid #e1e1e1;
				}
				.contentDiv{
            overflow-y: scroll;
            height: 486px;
					padding: 6px 8px;
					.el-tree{margin-top: 6px;}
				}
			}
		}
		.el-dialog{
			.el-dialog__header{
			    background-color: #f8f9fb;
			    border-bottom: 1px solid #e1e1e1;
			    padding:14px;
		    }
		    .el-dialog__body{
		    	padding:0;
		    }
		    .el-input{
		    	display: inline-block;
		    	width: 260px;
		    }
		    .warning{
		    	font-size: 8px;
		    	color: #aaa;
		    	margin-left: 4px;
		    }
		    .watchMember{
		    	height: 425px;
			    overflow: auto;
		    	.content{
		    		border-right: 1px solid #A2ABB2;
		    		padding-top: 12px;
		    		.searchForm{
		    			padding-left: 12px;
		    			.el-form-item__label{font-size: 14px;font-weight: 400;color: #222;}
		    			.el-input{width: 200px;}
		    			.el-form-item{margin-bottom: 0;}
		    		}
		    		.el-pagination{
		    			margin-top: 8px;
		    			margin-bottom: 8px;
		    		}
		    	}
		    }
		    .submitDialog{
		    	padding: 12px;
		    }
        .titleDiv{
          padding:13px 10px 10px 10px;
          font-size: 14px;
          font-weight: 500;
          color: #222;
            border-bottom: 1px solid #e1e1e1;
        }
		}
	}
</style>
